<template>
    <el-row>
  <!-- 表单 -->
      <el-form
        ref="goods"
        :model="goods"
        :rules="goodss"
        size="mini"
        label-width="70px"
        style="background-color: #fefefe;"
        >
  <!-- 商品介绍 -->
      <el-row class="rowstyle">
        <h1 class="pb-[20px] text-[25px]">商品介绍</h1>
          <el-row class="pl-[50px]">
          <el-col :span="24" v-if="goods.id">
            <el-form-item label="商品ID" prop="goodsSn">
              <el-input v-model="goods.id" placeholder="商品ID" :style="{width: '100%'}" disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品标号" prop="goodsSn">
              <el-input v-model="goods.goodsSn" placeholder="请输入商品标号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="goods.name" placeholder="请输入商品名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="市场售价" prop="counterPrice">
              <el-input v-model="goods.counterPrice" placeholder="0.0" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否新品" prop="isNew">
              <el-radio-group v-model="goods.isNew" size="medium">
                <el-radio v-for="(item, index) in isNewOptions" :key="index"  :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否热卖" prop="isHot">
              <el-radio-group v-model="goods.isHot" size="medium">
                <el-radio v-for="(item, index) in isHotOptions" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
          <el-form-item label="是否在售" prop="isOnSale">
            <el-radio-group v-model="goods.isOnSale" size="medium">
              <el-radio v-for="(item, index) in isOnSaleOptions" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品图片" prop="picUrl">
              <el-upload ref="picUrl" :action="picUrlAction" :headers="headers"
                :before-upload="picUrlBeforeUpload" :on-success="picUrlupload" list-type="picture-card" :file-list="picUrlActionList" :limit="1">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品画廊" prop="gallery">
              <el-upload ref="gallery" :file-list="galleryfileList" :action="galleryAction"
                :before-upload="galleryBeforeUpload" list-type="picture-card" :headers="headers"
                :on-success="picUrluploadGallery"
                >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品单位" prop="unit">
              <el-input v-model="goods.unit" placeholder="请输入商品单位" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关键字" prop="keywords">
              <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              size="small"
              @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else type="primary" class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属分类" prop="categoryId">
              <el-cascader v-model="goods.categoryId" :options="categoryList"      :props="fenleiProps"
                :style="{width: '50%'}" placeholder="请选择所属分类" clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属品牌商" prop="brandId">
              <el-select v-model="goods.brandId" placeholder="请选择所属品牌商" clearable :style="{width: '50%'}">
                <el-option v-for="(item, index) in brandList" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品简介" prop="brief">
              <el-input v-model="goods.brief" placeholder="请输入商品简介" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
          <el-form-item label="商品详情介绍" prop="detail">
            <div v-html="goods.detail" class="imgs"></div>
            <!-- <editor-bar :catchData="catchData" :editorContent="editorContent"></editor-bar> -->
          </el-form-item>
          </el-col>
        </el-row>
      </el-row>

  <!-- 商品规格 -->
        <el-row class="rowstyle">
            <h1 class="pb-[20px] text-[25px]">商品规格</h1>
            <el-row class="pl-[50px]">
              <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="默认标准规格" name="first">
                <tableList :borderList="borderList" :tableData="specifications"></tableList>
              </el-tab-pane>
              <el-tab-pane label="多规格支持" name="second">
                <el-button type="primary" @click="addspecificationss" size="mini">添加</el-button>
                <tableList :borderList="borderLists" :tableData="borderListas ? specificationss : []"></tableList>
              </el-tab-pane>
            </el-tabs>
            </el-row>
        </el-row>
  <!-- 商品库存 -->
        <el-row class="rowstyle">
            <h1 class="pb-[20px] text-[25px]">商品库存</h1>
            <el-row class="pl-[50px]">
              <tableList
              :borderList="borderLista"
              :tableData="borderListas ? products : []"></tableList>
            </el-row>
        </el-row>
  <!-- 商品参数 -->
        <el-row class="rowstyle">
            <h1 class="pb-[20px] text-[25px]">商品参数</h1>
            <el-button type="primary" @click="addList" size="mini">添加</el-button>
            <el-row class="pl-[50px]">
              <tableList :borderList="borderListb" :tableData="attributes"></tableList>
            </el-row>
        </el-row>
  <!-- 按钮 -->
        <el-row>
          <el-col>
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm" size="mini">取消</el-button>
            <el-button @click="resetForm" size="mini" type="primary">
            {{ this.$router.currentRoute.query.id === undefined ? '上架' : '更新商品' }}
            </el-button>
          </el-form-item>
        </el-col>
        </el-row>
  <!-- 弹窗 -->
        </el-form>
        <ElFromSubmit
        ref="FromSubmit"
        :formLIst="formLIst"
        :scope="scope"
        @handelConfirm="handelConfirm"
        ></ElFromSubmit>
    </el-row>
</template>
<script>
import { goodsCatAndBrand, goodsCreate, goodsDetail } from '../../../api/grounding'
import tableList from './tableList.vue'
import ElFromSubmit from './ElFromSubmit/index.vue'
// import EditorBar from './editoritem.vue'
export default {
  name: 'Grounding',
  components: {
    tableList,
    ElFromSubmit
    // EditorBar
  },
  props: [],
  data () {
    return {
      // 动态绑定货品
      formLIst: {},
      // 添加货品 弹窗
      formLIsts: {
        title: '添加货品',
        formLIst: [
          {
            id: 1,
            name: '货品规格列',
            prop: 'a',
            value: null,
            placeholder: '请输入货品规格列',
            size: 'mini',
            type: 'Tag',
            list: '标准'
          },
          {
            id: 2,
            name: '货品售价',
            prop: 'b',
            value: null,
            placeholder: '请输入货品售价',
            size: 'mini',
            nameList: 'price',
            type: 'input'
          },
          {
            id: 3,
            name: '货品数量',
            prop: 'c',
            value: null,
            placeholder: '请输入货品数量',
            size: 'mini',
            nameList: 'number',
            type: 'input'
          },
          {
            id: 4,
            name: '货品图片',
            prop: 'b',
            value: null,
            placeholder: '请输入货品图片',
            size: 'mini',
            type: 'picUrl'
          }
        ]
      },
      // 商品库存 弹窗
      formLIstb: {
        title: '添加商品参数',
        formLIst: [
          {
            id: 1,
            name: '货品售价',
            prop: 'b',
            value: null,
            placeholder: '商品参数名称',
            size: 'mini',
            type: 'input'
          },
          {
            id: 2,
            name: '货品数量',
            prop: 'c',
            value: null,
            placeholder: '商品参数值',
            size: 'mini',
            type: 'input'
          }
        ]
      },
      // 多规格添加
      formLIstc: {
        title: '设置规格',
        formLIst: [
          {
            id: 1,
            name: '规格名',
            prop: 'b',
            value: null,
            placeholder: '',
            size: 'mini',
            type: 'input'
          },
          {
            id: 2,
            name: '规格值',
            prop: 'c',
            value: null,
            placeholder: '商品参数值',
            size: 'mini',
            type: 'input'
          },
          {
            id: 3,
            name: '规格图片',
            prop: 'b',
            value: null,
            placeholder: '',
            size: 'mini',
            type: 'picUrl'
          }
        ]
      },
      // 设置请求头
      headers: {
        'X-Litemall-Admin-Token': localStorage.getItem('token')
      },
      // 动态标签
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      // 表单数据
      goods: {
        // 所属品牌商
        brandId: null,
        // 商品标号
        goodsSn: null,
        // 商品名称
        name: null,
        // 所属分类
        categoryId: null,
        // 市场售价
        counterPrice: null,
        // 是否新品
        isNew: true,
        // 是否热卖
        isHot: true,
        // 是否在售
        isOnSale: true,
        // 商品图片
        picUrl: null,
        // 商品画廊
        gallery: [],
        // 商品单位
        unit: null,
        // 关键字
        keywords: null,
        // 商品简介
        brief: '',
        // 商品详情介绍
        detail: null
      },
      // 必填验证
      goodss: {
        goodsSn: [{
          required: true,
          message: '请输入商品标号',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请输入商品名称',
          trigger: 'blur'
        }]
      },
      // 图片上传 上传地址
      picUrlAction: 'http://82.157.146.153:8090/admin/storage/create',
      // 多张图片上传 上传地址
      picUrlActionList: [],
      // 图片上传 上传地址
      galleryAction: 'http://82.157.146.153:8090/admin/storage/create',
      // 多张图片上传 上传地址
      staging: [],
      galleryfileList: [],
      // 是否新品
      isNewOptions: [{
        label: '新品',
        value: true
      }, {
        label: '非新品',
        value: false
      }],
      // 是否热卖
      isHotOptions: [{
        label: '普通',
        value: true
      }, {
        label: '热卖',
        value: false
      }],
      // 是否在售
      isOnSaleOptions: [{
        label: '在售',
        value: true
      }, {
        label: '未售',
        value: false
      }],
      // 所属分类
      categoryList: null,
      // 所属品牌商
      brandList: null,
      // 所属分类
      fenleiProps: {
        multiple: false
      },
      // 默认标准规格
      activeName: 'first',
      // 商品规格 表格
      borderList: [
        {
          id: 1,
          prop: 'specification',
          label: '规格名'
        },
        {
          id: 2,
          prop: 'value',
          label: '是否新品',
          type: 'Tag',
          filter: (row) => {
            return row.value === '标准' ? ['标准', 'success'] : ['非标准', '']
          }
        },
        {
          id: 3,
          prop: 'picUrl',
          label: '图片',
          type: 'picUrl'
        },
        {
          id: 4,
          label: '操作',
          type: 'button',
          btn: [
            {
              id: 1,
              name: '设置',
              handler: this.tableSet
            }
          ]
        }
      ],
      // 默认标准规格
      borderLists: [
        {
          id: 1,
          prop: 'specification',
          label: '规格名'
        },
        {
          id: 2,
          prop: 'value',
          label: '规格值',
          type: 'Tag',
          filter: (row) => {
            return row.value === '标准' ? ['标准', 'success'] : ['非标准', '']
          }
        },
        {
          id: 3,
          prop: 'picUrl',
          label: '规格图片',
          type: 'picUrl'
        },
        {
          id: 4,
          label: '操作',
          type: 'button',
          btn: [
            {
              id: 1,
              name: '添加',
              handler: this.tableSet
            },
            {
              id: 2,
              name: '设置'
              // handler: this.tableSet
            }
          ]
        }
      ],
      // 商品规格 表格
      borderListas: true,
      borderLista: [
        {
          id: 1,
          prop: 'specifications',
          label: '货品规格',
          type: 'Tag',
          filter: (row) => {
            return row.specifications[0] === '标准' ? ['标准', 'success'] : ['非标准', '']
          }
        },
        {
          id: 2,
          prop: 'price',
          label: '货品售价'
        },
        {
          id: 3,
          prop: 'number',
          label: '货品数量'
        },
        {
          id: 4,
          prop: 'url',
          label: '货品图片',
          type: 'url'
        },
        {
          id: 5,
          label: '操作',
          type: 'button',
          btn: [
            {
              id: 1,
              name: '设置',
              handler: this.tableSeta
            }
          ]
        }
      ],
      // 商品参数 表格
      borderListb: [
        {
          id: 1,
          prop: 'attribute',
          label: '商品参数名称'
        },
        {
          id: 2,
          prop: 'value',
          label: '商品参数值'
        },
        {
          id: 3,
          label: '操作',
          type: 'button',
          btn: [
            {
              id: 1,
              name: '设置',
              handler: this.tableSetb
            },
            {
              id: 2,
              name: '删除',
              handler: this.tableSetc
            }
          ]
        }
      ],
      // 商品库存 数据
      products: [
        {
          id: 0,
          number: 0,
          price: 0,
          specifications: ['标准'],
          url: ''
        }
      ],
      // 商品规格 数据
      specifications: [
        {
          picUrl: '',
          specification: '规格',
          value: '标准'
        }
      ],
      // 多规格支持 数据
      specificationss: [
        {
          picUrl: '',
          specification: '规格',
          value: '标准'
        }
      ],
      // 商品参数 数据
      attributes: [],
      // 表格数据
      scope: null
    }
  },
  computed: {
  },
  watch: {},
  created () {},
  mounted () {
    this.GetGoodsCatAndBrand()
  },
  methods: {
    // 取消
    submitForm () {
      this.$refs.goods.resetFields()
    },
    // 上架
    resetForm () {
      this.goods.categoryId = this.goods.categoryId[1]
      const dynamicTagsString = this.dynamicTags.join(', ')
      this.goods.keywords = dynamicTagsString
      const from = {
        goods: this.goods,
        products: this.products,
        specifications: this.specifications,
        attributes: this.attributes
      }
      goodsCreate(from).then(res => {
        console.log(res)
        this.$router.push('list')
        this.$refs.goods.resetFields()
      })
    },
    // 下拉菜单
    GetGoodsCatAndBrand () {
      const isId = this.$router.currentRoute.query.id
      if (isId) {
        goodsDetail({ id: isId }).then(res => {
          const { goods, products, specifications, attributes } = res.data
          this.goods = goods
          const arr = this.goods.gallery
          const newArrList = [{
            url: this.goods.picUrl
          }]
          this.picUrlActionList = newArrList
          console.log(newArrList)
          var newArr = arr.map(function (item) {
            return { url: item }
          })
          this.galleryfileList = newArr
          const dynamicTagsString = this.goods.keywords
          this.dynamicTags = dynamicTagsString.split(', ')
          this.products = products
          this.specifications = specifications
          this.attributes = attributes
          goodsCatAndBrand().then(res => {
            const { brandList, categoryList } = res.data
            this.brandList = brandList
            this.categoryList = categoryList
          })
        })
      } else {
        goodsCatAndBrand().then(res => {
          const { brandList, categoryList } = res.data
          this.brandList = brandList
          this.categoryList = categoryList
        })
      }
    },
    // 默认标准规格
    handleClick (tab, event) {
      if (tab.label === '默认标准规格') {
        this.borderListas = true
      } else {
        this.borderListas = false
      }
    },
    handleClicks (tab, event) {
      return (!tab.label === '默认标准规格') ? 'true' : 'false'
    },
    // 照片上传
    picUrlBeforeUpload (file) {
      return file
    },
    // 照片上传
    galleryBeforeUpload (file) {
      return file
    },
    // 照片上传 成功的回调
    picUrlupload (response, file, fileList) {
      this.goods.picUrl = response.data.url
    },
    // 多张照片上传 成功的回调
    picUrluploadGallery (response, file, fileList) {
      this.staging.push(response.data.url)
      this.goods.gallery = this.staging
    },
    // 商品规格
    tableSet (e, btn) {
      // const formLIst = this.formLIstc.formLIst
      // formLIst.forEach(item => {
      //   item.value = null
      // })
      this.formLIst = this.formLIsts
      this.$refs.FromSubmit.onOpen()
    },
    // 商品库存
    tableSeta (e, btn) {
      this.formLIst = this.formLIsts
      console.log(this.formLIst)
      console.log(this.formLIsts)
      // this.scope = btn.row
      // const formLIst = this.formLIsts.formLIst
      // formLIst.forEach(item => {
      //   item.value = null
      // })
      this.$refs.FromSubmit.onOpen()
    },
    // 商品参数 添加
    addList () {
      this.formLIst = this.formLIstb
      // const formLIst = this.formLIstb.formLIst
      // formLIst.forEach(item => {
      //   item.value = null
      // })
      this.$refs.FromSubmit.onOpen()
    },
    // 商品规格 添加
    addspecificationss () {
      console.log('商品规格')
      this.formLIst = this.formLIstc
      // const formLIst = this.formLIstc.formLIst
      // formLIst.forEach(item => {
      //   item.value = null
      // })
      this.$refs.FromSubmit.onOpen()
    },
    // 商品规格 添加
    addLists () {},
    // 商品参数 设置
    tableSetb () {},
    // 商品参数 删除
    tableSetc () {},
    // 动态标签
    handleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    // 动态标签
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 动态标签
    handleInputConfirm () {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    // 确定按钮
    handelConfirm (btn) {
      // const formLIst = this.formLIstc.formLIst
      // formLIst.forEach(item => {
      //   item.value = null
      // }
      console.log(this.formLIst)
    }
    // // 监听富文本的输入
    // catchData (e) {
    //   console.log(e)
    // },
    // // 富文本中的内容
    // editorContent (e) {
    //   console.log('e=====?>', e.editor)
    // }
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
.rowstyle {
  margin: 30px;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  margin-bottom: 20px;
}
.imgs{
  width: 80%;
  height: 300px;
  overflow: scroll;
  margin: 0 auto;
}
.imgs img {
  width: 80%;
  height: 20%;
  margin: 0 40px;
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
